<style lang="scss" scoped>
.custom-head{
  & > view{
    &:nth-child(1){
      height: var(--status-bar-height);
      width: 100%;
    }
    &:nth-child(2){
      height: 45px;
      line-height: 45px;
      padding-left: 20rpx;
      padding-right: 20rpx;

      & > view{
        &:nth-child(1){
          display: flex;
          align-items: center;
          font-size: 24rpx;
          width: 100rpx;
          image{
            width: 26rpx;
            height: 26rpx;
            margin-right: 7rpx;
            margin-top: -4rpx;
          }
        }
        &:nth-child(2){
          @include textOverflow();

          flex: 1;
          font-size: 32rpx;
          text-align: center;
        }
        &:nth-child(3){
          width: 100rpx;
        }
      }
    }
  }
}
</style>

<template>
  <view class="custom-head" :style="{
    background: bg
  }">
    <view :style="{
        height: height + 'px'
      }"></view>
    <view class="flex-between flex-row">
      <view>
        <view class="maxw" @click="backFn" v-if="back">
          <u-icon name="arrow-left" :color="color" size="30"></u-icon>
        </view>
        <slot name="left"></slot>
      </view>
      <view :style="{
      color: color
      }">
        <slot></slot>
      </view>
      <view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "HHead",
  created() {
    const t = uni.getWindowInfo().safeAreaInsets.top
    this.height = t > 0 ? t : uni.getSystemInfoSync().statusBarHeight
  },
  props: {
    'bg': {
      type: String,
      default: '#fff'
    },
    'color': {
      type: String,
      default: '#180B04'
    },
    'back': {
      type: Boolean,
      default: false
    },
    'goHome': {
      type: Boolean,
      default: false
    }
  },
  onShow() {

  },
  data() {
    return {
      height: 0
    }
  },
  methods: {
    backFn() {
      if(this.goHome) {
        this.utils.gotoPage('/pages/index/index')
      }else{
        this.utils.back()
      }
    }
  }
}
</script>
